<template>
  <div class="sidebar" :class="{ sidebarSmall: isCollapse }">
    <el-scrollbar style="height: 100%">
      <!--    <div class="sidebarTop">
        <i class="iconfont icon-suojin" :class="{'is-collapse':isCollapse}" @click="setNav"></i>
      </div> -->
      <!-- <el-menu
        class="el-menu-vertical-demo"
        mode="horizontal"
        :unique-opened="true"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        background-color="#364056"
        text-color="#fff"
        :router="true"
        :default-active="path"
        active-text-color="#f90"
      >
        <sidebar-item v-for="item of navData" :key="item.id" :item="item" :base-path="item.path"></sidebar-item>
      </el-menu> -->

      <el-menu
        class="el-menu-vertical-demo"
        mode="horizontal"
        :unique-opened="true"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        background-color="#0086ff"
        text-color="#fff"
        :router="true"
        :default-active="path"
        active-text-color="#fff"
      >
        <sidebar-item
          v-for="item of navData"
          :key="item.id"
          :item="item"
          :base-path="item.path"
        ></sidebar-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import SidebarItem from "./sidebar-item";
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";

export default {
  components: {
    SidebarItem,
  },
  data() {
    return {
      isCollapse: false,
      navDataHome: "/",
      navData: [],
      path: "",
      // navData: [
      //   {
      //     id: 1,
      //     name: "个人工作台",
      //     path: "/budget/home",
      //     icon: "icon-gongzuotai",
      //     children: []
      //   },
      //   {
      //     id: 2,
      //     name: "指标库",
      //     icon: "icon-zhibiao",
      //     path: "/budget/quotaWarehouse",

      //   },
      //   {
      //     id: 3,
      //     name: "预算管理",
      //     icon: "icon-genzong",
      //     path: "##3",
      //         children: [
      //           {
      //             id: 31,
      //             name: "预算指引",
      //             // icon: "icon-zhiying-",
      //             path: "/budget/budgetGuide"
      //           },
      //           {
      //             id:32,
      //             name: "预算编制",
      //             path: "/##32",
      //             children: [
      //               {
      //                 id: 321,
      //                 name: "自下而上空间编制",
      //                 path: "/budget/upToDownOrganization"
      //                 // children: [
      //                 //  {
      //                 //   id: 3211,
      //                 //   name: "空间编制",
      //                 //   path: "/budget/upToDownOrganization"
      //                 // },
      //                 // ]
      //               },
      //               {
      //                 id: 322,
      //                 name: "自上而下历史趋势",
      //                 path: "/budget/newUpToDownOrganization",
      //                 // children: [
      //                 //    {
      //                 //     id: 3221,
      //                 //     name: "历史趋势",
      //                 //      path: "/budget/newUpToDownOrganization",
      //                 //   },
      //                 // ]
      //               },
      //               // {
      //               //   id: 53,
      //               //   name: "预测验证",
      //               //   path: "/budget/forecastVerification"
      //               // },
      //               //   {
      //               // 	id: 44,
      //               // 	name: "自上而下的空间预测",
      //               // 	path: "/budget/budgetDecomposition"
      //               //   },
      //               // {
      //               //   id: 55,
      //               //   name: "自上而下的趋势预测",
      //               //   path: "/budget/upToDownTrend"
      //               // },

      //             ]
      //           },
      //           {
      //             id: 33,
      //             name: "预算下达",
      //             // icon: "icon-yusuan",
      //             path: "/budget/budgetDelivery"
      //           },
      //           {
      //             id: 34,
      //             name: "预算跟踪",
      //             path: "##34",
      //             // icon: "icon-genzong",
      //             children: [
      //               // {
      //               //   id: 71,
      //               //   name: "总体经营评价",
      //               //   path: "/budget/operationEvaluation"
      //               // },
      //               // {
      //               //   id: 72,
      //               //   name: "业务发展",
      //               //   path: "/budget/trafficIndicators"
      //               // },
      //               // {
      //               //   id: 73,
      //               //   name: "收入完成",
      //               //   path: "/budget/incomeTracking"
      //               // },

      //               //   {
      //               // 	id: 43,
      //               // 	name: "分套餐收入跟踪",
      //               // 	path: "/budget/pointMeal"
      //               //   },
      //               // {
      //               //   id: 74,
      //               //   name: "销售费用跟踪",
      //               //   path: "/budget/sellTracking"
      //               // },
      //               // {
      //               //   id: 75,
      //               //   name: "通信主业明细表",
      //               //   path: "/budget/detailTable"
      //               // },
      //               {
      //                 id: 341,
      //                 name: "历史趋势编制跟踪",
      //                 path: "/budget/compilationSummary"
      //               },
      //               // {
      //               //   id: 77,
      //               //   name: "核心平台收入分析 ",
      //               //   path: "/budget/revenueAnalysis"
      //               // },
      //               {
      //                 id:  342,
      //                 name: "预算下达跟踪",
      //                 path: "/budget/budgetReleaseTracking"
      //               },
      //               // {
      //               //   id: 79,
      //               //   name: "营销月报",
      //               //   path: "/budget/monthlyReport"
      //               // },
      //             ]
      //           },
      //         ]
      //   },

      //   {
      //     id: 4,
      //     name: "经营分析",
      //      path: "/##4",
      //      icon: "icon-jisuanqi",
      //     children: [
      //       {
      //         id: 41,
      //         name: "收入完成",
      //         path: "/budget/incomeTracking"
      //       },
      //       {
      //         id: 42,
      //         name: "业务发展",
      //         path: "/budget/trafficIndicators"
      //       },
      //       {
      //         id: 43,
      //         name: "专题分析",
      //         path: "/##43",
      //         children: [
      //            {
      //              id: 431,
      //              name: "核心平台收入",
      //              path: "/budget/revenueAnalysis"
      //            },
      //            {
      //              id: 432,
      //              name: "TOB-TOC",
      //              path: "/budget/TOBTOC"
      //            },
      //            {
      //              id: 433,
      //              name: "销售费用",
      //              path: "/budget/sellTracking"
      //            },
      //            {
      //              id: 434,
      //              name: "营销月报",
      //              path: "/budget/monthlyReport"
      //            },
      //            {
      //              id: 435,
      //              name: "收入日账",
      //              path: "/budget/chargeSystem"
      //            },
      //           ]
      //       },
      //       {
      //         id: 44,
      //         name: "经营通报",
      //          path: "##44",
      //         children: [
      //            {
      //              id: 441,
      //              name: "市场经营通报",
      //              path: "/budget/showpdf",
      //            },]
      //       },

      //       ]
      //   },
      //   {
      //     id: 5,
      //     name: "收入预估",
      //     path: "##5",
      //     icon: "icon-shouru",
      //     children: [
      //       {
      //         id: 51,
      //         name: "收入预估",
      //         path: "/budget/incomeForecast"
      //       },
      //       {
      //         id: 52,
      //         name: "导入预估",
      //         path: "/budget/forecastImport"
      //       }
      //     ]
      //   }
      // ]
    };
  },
  computed: {},
  mounted() {
    this.getUserMenus();
    this.path = this.$route.path.includes("/budget/knowledgSharing")
      ? "/budget/knowledgSharing"
      : this.$route.path;
  },
  methods: {
    getUserMenus() {
      var that = this, 
          token = getCookie("token"), eip;

      that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      eip = JSON.parse(getSessionStorage('eip'));
      if (!that.accountInfo) {
          that.$router.push({path: '/login'});
      } else {
        $budgetAPI.getUserMenus(
        { token: token, 
          iseeStatus: that.accountInfo.iseeStatus
        },
        (res) => {
          // console.log(res);
          if (res && res.code == 0) {
            if (eip) {
              that.accountInfo.roleId == 5 ? res.content[0].path = '/dashboard/index' : res.content[0].path = "/dashboard/home";
            }
            that.navData = res.content;
            // console.log(that.navData);
          }
        },
        (err) => {
          console.log("err", err);
        }
      );
      }
      
    },

    handleOpen(key, keyPath) {
      // console.log("handleOpen", key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log("handleClose", key, keyPath);
    },
    // 初始化 获取左侧菜单
    init() {
      $b2i.getNavTree(
        {},
        (res) => {
          // console.log(res);

          if (res.code != "0000") {
            this.navData = [];
            return false;
          }
          this.navData = res.data;
        },
        (err) => {}
      );
    },
    // setNav() {
    //   this.isCollapse = !this.isCollapse;
    //   this.$emit("leftNavState", this.isCollapse);
    // }
  },
};
</script>

<style lang="scss" scoped>
.sidebar {
  // position: fixed;
  // left: 0;
  // top: 68px;
  // bottom: 0;
  // // width: 200px;
  // background: #364056;
  // color: #fff;
  // overflow: hidden;
  // transition: all 0.2s;
  margin-left: 10px;
  display: inline-block;
  &.el-scrollbar__wrap {
    overflow: hidden;
  }
  &.sidebarSmall {
    width: 64px;
    .sidebarTop {
      text-align: center;
    }
  }
  .sidebarTop {
    height: 40px;
    line-height: 40px;
    background: #262d3c;
    margin-right: 2px;
    text-align: right;
    .iconfont {
      padding: 0 15px;
      font-size: 18px;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
    }
    .is-collapse {
      transform: rotate(180deg);
    }
  }
}
</style>

<style lang="scss">
.el-menu {
  background: none !important;
  background-color: none !important;
  border: none;
}
.el-scrollbar__view {
  .el-menu-vertical-demo {
    border: none;
  }
  .el-menu-vertical-demo > div {
    display: inline-block;
    // width: 120px;
    text-align: center;
   
    .el-menu-item,
    .el-submenu__title {
      height: 35px;
      line-height: 35px;
      margin: 0 5px;
      i {
        color: #fff;
        right: 2px;
      }
    }

    .el-menu-item.is-active,
    .el-submenu.is-active .el-submenu__title {
      border-radius: 50px;
      background-color: #3d89e5 !important;
     
    }
   
  }
  .el-menu-vertical-demo > div:first-child {
     li{
      // margin-right: 20px;
    }
  }
}
.menuList {
   .el-submenu .el-submenu__title > i {
      color: #fff;
      right: 5px;
    }
}
.el-menu--collapse {
  width: 64px;
}
</style>
